<template>
  <el-dialog
    v-model="dialog.visible"
    title="《权利义务告知摘要》"
    width="45%"
    @close="handleCloseDialog"
  >
    <div class="w-full max-w-full overflow-x-auto h-[600px]">
      <div v-html="info.content"></div>
      <!-- <VuePdfEmbed annotation-layer text-layer source="/agreement/UserRights.pdf" /> -->
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          确认注册
          <span v-if="count">({{ count }}S)</span>
        </el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import "vue-pdf-embed/dist/styles/annotationLayer.css";
import "vue-pdf-embed/dist/styles/textLayer.css";
import VuePdfEmbed from "vue-pdf-embed";
import WxAPI from "@/api/wx";

const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);
const dialog = reactive({
  title: "",
  visible: false,
});
const loading = ref(false);
const timer = ref();
const count = ref(0);
function showSummary() {
  count.value = 10;
  loading.value = true;
  timer.value = setInterval(() => {
    count.value--;
    if (count.value <= 0) {
      clearInterval(timer.value);
      loading.value = false;
    }
  }, 1000);
}
onBeforeUnmount(() => {
  clearInterval(timer.value);
});
const info = ref({
  title: "",
  content: null,
});

const getInfo = async () => {
  try {
    const data = await WxAPI.getAgreement("merchantSummary");
    info.value.title = data.data.title;
    info.value.content = data.data.content;

    console.log(data);
  } catch (e) {
    console.log(e);
  } finally {
  }
};

async function handleSubmit() {
  emit("confirm");
  dialog.visible = false;
  emit("update:modelValue", false); // 关闭弹窗
}
async function handleCancel() {
  emit("cancel");
  dialog.visible = false;
  emit("update:modelValue", false); // 关闭弹窗
}
// 关闭弹窗
function handleCloseDialog() {
  clearInterval(timer.value);
  dialog.visible = false;
  emit("update:modelValue", false); // 关闭弹窗
}
function showModal(val) {
  dialog.visible = true;
  showSummary();
}

onMounted(async () => {
  getInfo();
});

defineExpose({
  showModal,
});
</script>
<style style="scss" scoped></style>
